<script lang="ts" setup name="Overview">
import type { TypeUserInfo } from '@/stores/types';

import { getPlayerInfoApi } from '@/api/client/userApi'
import router from '@/router'
import { useClientStore } from '@/stores/client'
import { Message } from '@arco-design/web-vue';
import { onActivated, onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'
import RankInfo from './components/rankInfo.vue';
import UserChoose from './components/userChoose.vue';
import UserHistory from './components/userHistory.vue';
import UserInfo from './components/userInfo.vue';
import UserSearch from './components/userSearch.vue';

const { t } = useI18n()

const loading = ref(false)

const chooseOptions = ref<TypeUserInfo[]>([])

const userInfo = ref<TypeUserInfo>()
function changeShowInfo(row) {
  const data = row
  if (data.puuid) {
    userInfo.value = data
    getUserInfo(data.puuid)
  }
}

function delUser(puuid) {
  // 如果删除的是正在查看的召唤师，就显示自己
  if (userInfo.value?.puuid === puuid) {
    changeShowInfo(chooseOptions.value[0])
  }
  const index = chooseOptions.value.findIndex(item => item.puuid === puuid)
  if (index !== -1) {
    chooseOptions.value.splice(index, 1)
  }
}

const UserHistoryRef = ref(null)
const RankInfoRef = ref(null)
async function getUserInfo(puuid) {
  await UserHistoryRef.value.getHistoryData(puuid)
  await RankInfoRef.value.getRankedStats(puuid)
  loading.value = false
}

async function searchOterUser(puuid) {
  loading.value = true
  try {
    const data: TypeUserInfo = await getPlayerInfoApi(puuid)
    if (!data) {
      Message.error(t('SearchSummoner.NotFound'))
      loading.value = false
      return
    }
    // 判断是否已经存在
    const index = chooseOptions.value.findIndex(item => item.puuid === data.puuid)
    if (index !== -1) {
      changeShowInfo(chooseOptions.value[index])
      return
    }
    chooseOptions.value.push(data)
    changeShowInfo(data)
  } catch (error) {
    Message.error(error.message || t('SearchSummoner.NotFound'))
    loading.value = false
  }
}

function addPlayer(puuid) {
  // 判断现在是否是当前页
  if (router.currentRoute.value.path !== '/') {
    router.push({ path: '/', query: { puuid } })
  } else {
    searchOterUser(puuid)
  }
}
provide('addPlayer', addPlayer)

// 战报
const HistoryReport = ref({})
function getReport(report) {
  HistoryReport.value = report
}

onActivated(() => {
  const { puuid } = useRoute().query
  if (puuid) {
    searchOterUser(puuid)
  }
})

// 刚进入页面的时候，把自己的信息添加进去并展示
onMounted(() => {
  const info = useClientStore().userInfo
  info.isMy = true
  chooseOptions.value = [info]
  changeShowInfo(info)
})
</script>

<template>
  <div class="overview app_container w-full h-full">
    <a-row class="overview_main h-full">
      <!-- 左侧 信息、段位 -->
      <a-col :flex="16" class="h-full flex flex-col">
        <!-- 选择召唤师、搜索召唤师 -->
        <div class="overview_info_header flex items-center h-32px">
          <UserChoose v-model="userInfo" :options="chooseOptions" @change="changeShowInfo" @del="delUser" />
          <UserSearch @search="searchOterUser" />
          <div class="overview_refresh ml-auto">
            <a-button :disabled="loading" shape="circle" :title="t(`UserInfo.refresh`)"
              @click="searchOterUser(userInfo?.puuid)">
              <icon-loop :spin="loading" size="18" />
            </a-button>
          </div>
        </div>
        <div class="overview_info_main h-250px mt-15px flex items-center">
          <!-- 头像、昵称、等级 -->
          <a-col :flex="14" class="h-full">
            <UserInfo :data="userInfo" :report="HistoryReport" />
          </a-col>
          <!-- 段位 -->
          <a-col :flex="10" class="h-full ml-15px max-w-350px">
            <RankInfo ref="RankInfoRef" />
          </a-col>
        </div>
      </a-col>
      <!-- 右侧 历史战绩 -->
      <a-col :flex="8" class="h-full ml-20px overflow-hidden">
        <UserHistory ref="UserHistoryRef" @report="getReport" />
      </a-col>
    </a-row>
  </div>
</template>

<style lang="scss" scoped></style>
